<template>
  <el-dialog
    :visible="showDialog"
    close-on-press-escape
    :title="title"
    @close="btnClose"
  >
    <el-form ref="addForm" :model="addForm" :rules="addRules" label-width="100px" :label-position="labelPosition" size="medium">
      <!-- 部门名称 -->
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="addForm.name" style="width: 80%" placeholder="1-50个字符" />
      </el-form-item>
      <!-- 部门编码 -->
      <el-form-item label="部门编码" prop="code">
        <el-input
          v-model="addForm.code"
          style="width: 80%"
          placeholder="1-50个字符"
        />
      </el-form-item>
      <!-- 部门负责人  -->
      <el-form-item label="部门负责人" prop="manager">
        <el-select
          v-model="addForm.manager"
          style="width: 80%"
          placeholder="选择负责人"
        >
          <el-option v-for="item in people" :key="item.id" :value="item.username" :label="item.username">
            <!-- 每个选项 遍历  -->
          </el-option>
        </el-select>
      </el-form-item>
      <!--  部门介绍 -->
      <el-form-item label="部门介绍" prop="introduce">
        <el-input
          v-model="addForm.introduce"
          style="width: 80%"
          placeholder="1-300个字符"
          type="textarea"
          :rows="3"
        />
      </el-form-item>

      <!-- 取消和确认 -->
      <el-row type="flex" justify="center">
        <!-- 只占6份 好居中 如果是24份 就是铺满 内容无法居中 -->
        <el-col :span="6">
          <el-button @click="btnClose">取消</el-button>
          <el-button type="primary" @click="btnOK">确认</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
// 获取新的部门数据
import { getDepartmentsAPI, addDepartmentsAPI, getDetailDepartmentsAPI, editDepartmentsAPI } from '@/api'
export default {
  name: 'AddDepts',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    addTree: {
      default: null,
      type: Object
    }, // 点击添加 记录的父节点
    people: {
      type: Array,
      default: function() {
        return []
      } // 负责人信息
    }
  },
  data() {
    // 检验名字的合法性
    const checkNameRepeat = async(rule, value, callback) => {
      // depts是所有的部门数据 结构出来
      // 目的：再获取一次部门数据 万一有人已经更新了部门的数据对叭
      const { depts } = await getDepartmentsAPI()
      // isRepeat 判断是否找到了名字重复的部门
      // filter 先筛选出 同级部门
      // some 判断名字是否一致
      // value是校验的字段 item.name是同级的部门的名字
      let isRepeat = false
      if (this.addForm.id) {
        // 有id 就是编辑模式
        // 规则:
        //    filter: 除了我自己 同级
        //    some: 如果找到和我名字一样的 不通过
        // item.pid === this.addTree.pid 啥意思?item.pid是每个数据的pid this.addTree.pid是点击的部门的pid 如果一样就是同级的
        // =》 addTree.pid 可以换成 addForm.pid
        // item.id !== this.addTree.id 除了我自己
        // item.name === this.addTree.name 同级 名字不能一样
        isRepeat = depts.filter(item => item.id !== this.addTree.id && item.pid === this.addForm.pid).some(item => item.name === this.addTree.name)
      } else {
        // 无id就是添加模式
        // 规则：
        //    filter: 同级的
        //    some: 如果有name一样的就 不能通过
        // item.pid === this.addTree.id 当前点击部门的子部门
        // item.name === value 名字不能一样
        isRepeat = depts.filter(item => item.pid === this.addTree.id).some(item => item.name === value)
      // 如果是true 重复 报错
      }
      // 如果是true  名字有一样的报错
      isRepeat ? callback(new Error(`存在同级的部门${value}了 换个名字吧!`)) : callback()
    }
    const checkCodeRepeat = async(rule, value, callback) => {
      const { depts } = await getDepartmentsAPI()
      let isRepeat = false
      if (this.addForm.id) {
        // filter 不是我自己
        // some code 不能一样 不然是true 就报错
        isRepeat = depts.filter(item => item.id !== this.addTree.id).some(item => item.code === this.addTree.code)
      } else {
        isRepeat = depts.some(item => item.code === value && value)
      }

      isRepeat ? callback(new Error(`组织结构下存在同样的${value}了 换个名字吧!`)) : callback()
    }
    return {
      labelPosition: 'right', // 控制弹层
      addForm: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门负责人
        introduce: '' // 部门介绍
      },
      addRules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: 'blur' },
          {
            validator: checkNameRepeat,
            trigger: 'blur'
          }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: 'blur' },
          {
            validator: checkCodeRepeat,
            trigger: 'blur'
          }
        ],
        manager: [
          { required: true, message: '部门负责人不能为空', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: 'blur' },
          { min: 1, max: 300, message: '部门介绍要求1-300个字符', trigger: 'blur' }
        ]

      }
    }
  },
  computed: {
    title() {
      return this.addForm.id ? '编辑部门' : '新增部门'
    }
  },
  methods: {
    // 新增负责人
    // async addManager() {
    //   this.people = await getEmployeeSimpleAPI()
    // },
    // 校验通过
    btnOK() {
      this.$refs.addForm.validate(async isOK => {
        if (isOK) {
          // 传递的参数
          if (this.addForm.id) {
            await editDepartmentsAPI(this.addForm)
          } else {
            await addDepartmentsAPI({ ...this.addForm, pid: this.addTree.id })
          }

          // 通知父组件重新拉取数据 获取新的部门
          this.$emit('addDepts')
          // 关闭弹层的方法一 通知父组件 关闭dialog弹层
          // this.$emit('changeDialog', false)
          // 关闭弹层的方法二 this.$emit('update:props名称', 修改为的值);
          this.$emit('update:showDialog', false)
        }
      })
    },
    // 取消校验
    btnClose() {
      this.addForm = {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门负责人
        introduce: '' // 部门介绍
      }
      // 需求1：关闭弹层
      this.$emit('update:showDialog', false)
      // 需求2：数据清除
      // 需求3：取消校验 => 删除校验的红色效果 => 打开后 没有上次的红色效果
      this.$refs.addForm.resetFields()
    },
    // 获取指定部门信息
    // 传入参数不能写 this.addTree.id 因为 父传子是异步 可能调用了 还没传递过来
    async getDetailDepartments(id) {
      // 调用方法 并且左侧更新数据 => 数据回写
      this.addForm = await getDetailDepartmentsAPI(id)
    }
  }
}
</script>

<style>

</style>
